<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码强度检测器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            /* align-items: center; */
            height: 100vh;
            margin: 0;
        }

        .container {
            background: #fff;
            margin-top: 50px;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
            height: 358px;
        }

        h1 {
            text-align: center;
            font-size: 1.8rem;
            margin-bottom: 30px;
        }

        .password-wrapper {
            margin-bottom: 20px;
        }

        input[type="password"] {
            width: 100%;
            padding: 10px;
            font-size: 1rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .strength-meter {
            display: flex;
            margin-top: 10px;
            gap: 5px;
        }

        .strength-meter div {
            flex: 1;
            height: 8px;
            background: #e0e0e0;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .strength-meter div.active {
            background: #4caf50;
        }

        .feedback {
            margin-top: 15px;
            font-size: 1rem;
            color: #555;
        }

        .feedback span {
            display: block;
            margin-bottom: 5px;
        }

        .feedback span.valid {
            color: #4caf50;
        }

        .feedback span.invalid {
            color: #f44336;
        }

        .strength-text {
            text-align: center;
            margin-top: 10px;
            font-size: 1rem;
            font-weight: bold;
        }

        .strength-text.weak {
            color: #f44336;
        }

        .strength-text.medium {
            color: #ff9800;
        }

        .strength-text.strong {
            color: #4caf50;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>🔐 密码强度检测器</h1>
        <div class="password-wrapper">
            <input type="password" id="password" placeholder="请输入密码">
        </div>
        <div class="strength-meter" id="strength-meter">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="strength-text" id="strength-text">密码强度：</div>
        <div class="feedback" id="feedback"></div>
    </div>

    <script>
        const passwordInput = document.getElementById('password');
        const strengthMeter = document.getElementById('strength-meter');
        const feedback = document.getElementById('feedback');
        const strengthText = document.getElementById('strength-text');

        const requirements = [
            { regex: /.{8,}/, message: "至少8个字符" },
            { regex: /[a-z]/, message: "至少包含一个小写字母" },
            { regex: /[A-Z]/, message: "至少包含一个大写字母" },
            { regex: /\d/, message: "至少包含一个数字" },
            { regex: /[^A-Za-z0-9]/, message: "至少包含一个特殊字符" }
        ];

        passwordInput.addEventListener('input', () => {
            const password = passwordInput.value;
            let score = 0;

            // 检查密码是否满足要求
            const feedbackMessages = requirements.map(req => {
                const isValid = req.regex.test(password);
                if (isValid) score++;
                return `<span class="${isValid ? 'valid' : 'invalid'}">${isValid ? '✅' : '❌'} ${req.message}</span>`;
            });

            // 更新反馈信息
            feedback.innerHTML = feedbackMessages.join('');

            // 更新强度指示器
            const meterSections = strengthMeter.children;
            for (let i = 0; i < meterSections.length; i++) {
                if (i < score) {
                    meterSections[i].classList.add('active');
                } else {
                    meterSections[i].classList.remove('active');
                }
            }

            // 更新强度文字
            let strength = "弱";
            let strengthClass = "weak";
            if (score >= 3) {
                strength = "中";
                strengthClass = "medium";
            }
            if (score >= 5) {
                strength = "强";
                strengthClass = "strong";
            }
            strengthText.textContent = `密码强度：${strength}`;
            strengthText.className = `strength-text ${strengthClass}`;
        });
    </script>
</body>

</html>